﻿@using LoveCollection.Application.Dto;
@using System.Text;
@{
    ViewData["Title"] = "爱收藏 - 让你爱上收藏";
    var user = ViewBag.UserInfo as UserInfoModel;
}

<link href="~/css/Index.css?v=201901001" rel="stylesheet" />
<link href="~/css/_all.css" rel="stylesheet" />
<style type="text/css">
</style>

<div class="content clearfix">

    <div class="addtypeContent clearfix">
        @if (user != null && !string.IsNullOrWhiteSpace(user.UserId))
        {
            <div class="div-logout">
                <span class="userName">@user.UserMail</span>
                <a href="/Home/LogOff" class="logout">退出登录</a>
            </div>
        }
        <div>
            <input type="text" class="inp-type displayNone add-input-type" />
            <a href="javascript:;" class="btn-addtype add">新建分类</a>
            <a href="/Home/About" target="_blank" style="margin-left:10px;color:#000000">关于</a>
            <a href="/Home/About" style="margin-left:10px;color:#000000">导入收藏夹</a>
        </div>
    </div>

    @if (user == null || string.IsNullOrWhiteSpace(user.UserId))
    {
        <div class=" loginBlock div-login">
            <div class="loginTitle">登录 . 注册</div>
            <div>
                <input type="text" value="@user?.UserMail" placeholder="请输入您的邮箱" class="mail" />
            </div>
            <div>
                <input type="password" placeholder="请输入您的密码" class="passwod" />
            </div>
            <div>
                <button type="button" class="btn-register" title="登录即注册">登录 / 注册</button>
            </div>
        </div>
    }
    @{
        <div class="collectionDetailedInfoContent">
            <div class="collectionDetailedInfo collectionDetailedInfo1">

            </div>
            <div class="collectionDetailedInfo collectionDetailedInfo2">

            </div>
            <div class="collectionDetailedInfo collectionDetailedInfo3">

            </div>
        </div>
    }

    @*<div class="panel-title">常用链接</div><div class="div-block clearfix diyCollection"></div>*@
</div>

<div class="displayNone directoryItmeTypesContent">
    <div class="directoryItmeTypes">

    </div>
    @*<img class="directoryItmeTypesDel" src="/images/Delete.png" />*@
</div>
<div class="showDirectory displayNone">
    显示目录
</div>

<div class="allFold">
    全部折叠
</div>

<div class="modal displayNone">
    <div class="collectionTypes">

    </div>
    <div class="collectionContent">
        <input type="text" class="url" />
        <input type="text" class="value" />
        <input type="hidden" class="id" />
    </div>
    <div>
        <button class="cancel">取消</button>
        <button class="modify">修改</button>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/toastr.min.2.1.3.js"></script>
<script src="~/js/icheck.min.js"></script>
<script type="text/javascript">
    //1、通过试图传递数据（减少请求）
    //2、通过js动态组装（减小请求内容）
    //这里的优化，从请求需要3秒多 提升到了 200毫秒不到
    var types = @(Html.Raw(ViewBag.Types));
    var collections = @(Html.Raw(ViewBag.Collections));
    if (types) {
        var typeids = localStorage.getItem("showTypeList").split(',');
        var tempTypes = "";
        var collectionDetailedInfo1 = "";
        var collectionDetailedInfo2 = "";
        var collectionDetailedInfo3 = "";
        var collectionDetailedInfo4 = "";
        var pageNumber = types.length / 3;
        for (var i = 0; i < types.length; i++) {
            var tempHtml = "";
            var type = types[i];
            tempHtml += '<div class="type-block '+ (typeids.indexOf(type.Id.toString())>-1?"show":"") +'" data-typeid="' + type.Id + '">\
                            <div id="' + type.Id + '" data-id="' + type.Id + '" class="panel-title">\
                                <span draggable="true">' + type.Name + '</span>\
                                <a class="btn-type-edit visibilityHidden"><img src="/images/edit.png" /></a>\
                                <a class="btn-type-del visibilityHidden"><img src="/images/Delete.png" /></a>\
                                <a class="btn-type-shwodisplay"><img src="/images/'+(typeids.indexOf(type.Id.toString())>-1?"下":"左")+'.png" /></a>\
                            </div>\
                            <div class="div-block clearfix">';
            var cellTempHtml = "";
            for (var j = 0; j < collections.length; j++) {
                var collection = collections[j];
                if (collection.TypeId == type.Id) {
                    cellTempHtml += ' <div class="cell" data-id="' + collection.Id + '">\
                            <div class="div-edit">\
                                <span class="span-edit">\
                                    <a class="a-url-address" draggable="true" title="'+ collection.Title + '"\
                                       href="'+ collection.Url + '">' + collection.Title + '</a>\
                                </span>\
                                <a class="btn-edit visibilityHidden"><img src="/images/edit.png" /></a>\
                                <a class="btn-del visibilityHidden"><img src="/images/Delete.png" /></a>\
                            </div>\
                        </div>';
                }
            }
            tempHtml += cellTempHtml;
            tempHtml += '<div class="cell">\
                                <div class="div-edit">\
                                    <span class="span-edit btn-new visibilityHidden displayInlineBlock">新增</span>\
                                </div>\
                             </div>\
                          </div>\
                      </div>';

            if (pageNumber > i) {
                collectionDetailedInfo1 += tempHtml;
            }
            else if (pageNumber * 2 > i) {
                collectionDetailedInfo2 += tempHtml;
            }
            else {
                  collectionDetailedInfo3 += tempHtml;
            }
        }
        $(".collectionDetailedInfo1").html(collectionDetailedInfo1);
        $(".collectionDetailedInfo2").html(collectionDetailedInfo2);;
        $(".collectionDetailedInfo3").html(collectionDetailedInfo3);

        //目录数据组装
        //排序
        types.sort(
            function compareFunction(param1, param2) {
                return param1.Name.localeCompare(param2.Name, "zh");
            }
        );
        for (var i = 0; i < types.length; i++) {
            var type = types[i];
            tempTypes += "<div><a class='apositioning' data-typeid='" + type.Id + "' href='/#" + type.Id + "'>" + type.Name + "</a></div>";
        }
        $(".directoryItmeTypes").html(tempTypes);

    }

</script>
<script src="~/js/Index.js?v=201901001"></script>

